<!--
 * @Author: your name
 * @Date: 2021-08-04 09:06:57
 * @LastEditTime: 2021-08-08 18:51:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briupf:\Web课后练习成果\HTML\B站练习.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站页面练习</title>
    <link rel="stylesheet" type="text/css" href="./B站样式.css">
</head>
<body>
    <!-- B站的头部 -->
    <header class="header">
        <div class="nav1">
            <div class="logo">
                <a href=""><img src="./image/bilibili.png" alt="B站的logo"></a>
            </div>
            <!-- B站的导航栏 -->
            <div class="nav2">
                <!-- 左边的导航 -->
                <ul id="left">
                <li><a href="#">主站</a></li>
                <li><a href="#">番剧</a></li>
                <li><a href="#">游戏中心</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">会员购</a></li>
                <li><a href="#">漫画</a></li>
                <li><a href="#">赛事</a></li>
                <li><a href="#">下载APP</a></li>
                </ul>
                <!-- 右边的导航 -->
                <ul id="right">
                <li><a href="#">登录</a></li>
                <li><a href="#">大会员</a></li>
                <li><a href="#">消息</a></li>
                <li><a href="#">动态</a></li>
                <li><a href="#">收藏</a></li>
                <li><a href="#">历史</a></li>
                <li><a href="#">创作中心</a></li>
                <li><a href="#" class="button">投稿</a></li>
                </ul>
                <div class="search">
                    <form action="" method="GET" class="search-from">
                        <!-- 搜索栏的设置 -->
                    <input type="text" id="nav-search" placeholder="那个胡子拉碴的大叔会踢球吗？">
                    <!-- 搜索框的按钮 -->
                    <button type="button" class="search-button">
                        <!-- <span> -->
                            <img src="./image/搜索.png" alt="搜索" style="width: 15px; height:15px">
                        <!-- </span> -->
                    </button>
                    </form>
        </div>
        <div class="header-img">
            <img src="./image/B站登录页面header.png" alt="">
        </div>
    </header>
    <!-- B站的登录页面 -->
    <!-- 登录标题的设置 -->
    <div class="title">
        <div class="title-line">
            <span class="title" >登录</span>
        </div>
        
    </div>
    <!-- 登录二维码的设置 -->
    <div>
    <div class="download">
        <img src="./image/下载二维码.png" alt="下载二维码" class="img1">
        <img src="./image/扫码.png" alt="扫码登录" class="img2">
        <div class="txt">
            <p style="font-size: 20px;">扫描二维码登录</p>
            <p style="font-size: 14px; color: #717171;">请使用 <a href="#" style="color: #00a7de;">哔哩哔哩客户端</a></p>
            <p style="font-size: 14px; color: #717171;">扫码登录</p> 
            <p style="font-size: 14px; color: #717171;">或扫码下载APP</p>
        </div>
    </div>
    <!-- 登录框的设置 -->
    <div class="nav3">
        <table>
        <form action="" method="GET">
            
                <div class="login"> 
                    <a href="#" id="selected">密码登录</a>  
                    <a href="./B站短信登录.html" id="unselected">短信登录</a> 
                </div>
                <input type="text" name="userphone" id="userphone" placeholder="你的手机号/邮箱" required class="text">
                <br>
                <input type="password" name="password" id="password" placeholder="密码" required class="text">
                <br>
                <!-- 复选框 -->
                <div id="checkbox">
                    <input checked type="checkbox" value="checkbox" id="checkbox">
                    <label for="checkbox" style="font: size 15px; color: #717171;">记住我</label>
                    <span style="font-size: 10px; color: #bbbbbb;"> 不是自己的电脑不要勾选此项</span>
                <!-- 无法验证？忘记密码 -->
                    <span><a href="#">忘记密码?</a></span>
                    <span><a href="#">无法验证？</a></span>
                </div>
                <input class="button1" type="submit" value="登录">
                <button type="button" class="button2">
                    <a href="./B站注册.html"><span style="color: #595959;">注册</span></a>
                </button>
            
        </table>
    </div>
</div>
</body>
</html>
